<template>
  <div class="container" @click="handleClick">
    <div class="header">
      <span class="return"></span>
    </div>
    <div class="body">
      <message-list :messages="messages"></message-list>
    </div>
    <div class="footer">
      <div class="tags">
        <div class="tag">服务评价</div>
        <div class="tag">订单查询</div>
      </div>
      <div class="input-zone">
        <div class="text-input">
          <input type="text" v-model="form.content" />
        </div>
        <div class="face-input" @click="showEmoji = !showEmoji">
          <img src="/public/smile.png" alt />
        </div>
        <div class="image-input" v-show="!sendable">
          <upload @setMsg="setMsg"></upload>
        </div>
        <div class="send-btn" v-show="sendable">
          <button @click="handleSend">发送</button>
        </div>
      </div>
    </div>
    <div class="toolroom">
      <transition name="fade">
        <emoji @setMsg="setMsg" :showEmoji="showEmoji"></emoji>
      </transition>
    </div>
  </div>
</template>

<script>
import ws from '../../socket'
import config from "../../config"
import upload from './Upload.vue'
import emoji from './Emoji.vue'
import messageList from './MessageList.vue'
import { isMobile } from "../../utils/helper"
import { getConversationInfo, addMessage, markAsRead } from '../api/server'
import { defineComponent, onMounted, reactive, toRefs, computed, watch } from 'vue'

export default defineComponent({
  name: 'Chat',
  components: { messageList, upload, emoji },
  setup() {
    const guest_id = 4

    const state = reactive({
      showEmoji: false,
      conversation: {},
      messages: [],
      form: {
        type: 1,
        content: '',
      },
    })

    const sendable = computed(() => {
      return Boolean(state.form.content)
    })

    const setMsg = (content, type, sendNow = false) => {
      state.form.content += content;
      state.form.type = type
      if (sendNow) {
        handleSend()
      }
    }

    const resetForm = () => {
      state.form.type = 1
      state.form.content = ''
    }

    const generatorMessageCommon = () => {
      return {
        from: 1,
        type: state.form.type || 1,
        content: state.form.content,
        sender: guest_id,
        receiver: state.conversation.user_id,
        conversation_id: state.conversation.id,
        to_role: "user",
      }
    }

    const handleSend = async () => {
      let newMsg = generatorMessageCommon()
      const { status, data } = await addMessage(newMsg)
      if (status == 'success') {
        state.messages.push(data)
        resetForm()
      } else {
        console.error("发送失败")
      }
    }

    let wsUri = `${config.wsUrl}/guest/${guest_id}`
    ws.init(wsUri)
    ws.onmessage((e) => {
      let data = JSON.parse(e.data)
      if (data.cmd == 'talk') {
        state.messages.push({
          content: data.content,
          type: data.type,
          from: 2,
        })
        markAsRead(data.chat_id)
      }
    })

    getConversationInfo(guest_id).then(result => {
      if (result.status == 'success') {
        state.conversation = result.conversation
        state.messages = result.conversation.messages
      } else {
        console.log(result.message)
      }
    })

    const handleClick = (e) => {
      let toolroom = document.querySelector(".toolroom")
      let faceBox = document.querySelector(".face-input")
      if (!toolroom.contains(e.target) && !faceBox.contains(e.target)) {
        state.showEmoji = false;
      }
    }

    return {
      ...toRefs(state),
      handleSend,
      handleClick,
      setMsg,
      isMobile,
      sendable,
    }
  },
})
</script>

<style scoped>
.container {
  height: 100%;
  width: 100%;
  background-color: #f8f8f8;
  display: flex;
  flex-direction: column;
  padding: 0;
  margin: 0;
}

.header {
  height: 45px;
  border-bottom: 1px solid #d6d6d6;
  box-sizing: border-box;
  text-align: left;
  padding: 0 10px;
  display: flex;
  align-items: center;
}

.header .return {
  display: inline-block;
  height: auto;
  overflow: hidden;
  box-sizing: border-box;
}

.header .return img {
  vertical-align: bottom;
}

.body {
  flex: 1;
  padding: 0;
  overflow-y: auto;
}

.footer {
  height: 85px;
  background-color: #f3f3f3;
  text-align: left;
  padding: 10px;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

.input-zone {
  display: flex;
  flex-direction: row;
  box-sizing: border-box;
  align-items: center;
}

.tags {
  display: flex;
  flex-direction: row;
  margin-bottom: 5px;
}

.tag {
  font-size: 10px;
  padding: 3px 8px;
  border: 0.5px solid #d6d6d6;
  border-radius: 12px;
  margin-right: 10px;
  font-weight: lighter;
  color: black;
}

.text-input {
  flex: 1;
  margin-right: 12px;
  box-sizing: border-box;
}

.text-input input {
  height: 35px;
  background-color: white;
  border-radius: 20px;
  outline: none;
  border: none;
  width: 100%;
  text-indent: 10px;
}

.face-input {
  margin-right: 10px;
}

.face-input img {
  vertical-align: bottom;
  width: 28px;
}

.image-input img {
  vertical-align: bottom;
}

.image-input {
}

.send-btn button {
  height: 25px;
  line-height: 25px;
  padding: 0 7px;
  color: #fff;
  background-color: #07c160;
  border: 1px solid #07c160;
  border-radius: 3px;
}

.toolroom {
  max-height: 150px;
  overflow: auto;
}
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
}
</style>
